<template>
	<u-navbar title="我的帖子" :autoBack="true"
		titleStyle="color:#d1f5f8;margin-left:-65%;margin-top:-0.5%;font-size:30rpx;" leftIconSize="30rpx"
		leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<u-tabs :list="tabs" itemStyle="padding-right:70rpx; padding-left:70rpx;height: 80rpx;" @change="changeTab"
		activeStyle="font-weight:700;font-size:32rpx" inactiveStyle="font-size:32rpx"></u-tabs>
	<view class="main">
		<ConfessionWallItem v-for="p in confessionContent" :key="p.id" :item="p" @deletedShow="deleteOutcome"
			v-if="tabIndex==0">
		</ConfessionWallItem>
		<LostItem v-for="p in lostContent" :key="p.id" :item="p" @deletedShow="deleteOutcome" v-else-if="tabIndex==1">
		</LostItem>
		<UnusedItem v-for="p in unusedContent" :key="p.id" :item="p" @deletedShow="deleteOutcome" v-else></UnusedItem>
		<!-- 提示该列表为空内容 -->
		<u-empty mode="list" v-show="(confessionContent.length == 0 && tabIndex==0 )||(lostContent.length == 0 && tabIndex==1 ) ||
			(unusedContent.length==0 && tabIndex==2)" />
	</view>
	<!-- 删除后的提示 -->
	<u-modal :show="deletedShow && tabIndex==1" :content="lostStore.deletedStatus.msg"
		@confirm=" closeDeletedShow"></u-modal>
	<!-- 删除后的提示 -->
	<u-modal :show="deletedShow && tabIndex==2" :content="unusedStore.deletedStatus.msg"
		@confirm=" closeDeletedShow"></u-modal>
	<!-- 删除后的提示 -->
	<u-modal :show="deletedShow && tabIndex==0" :content="confessionStore.deletedStatus.msg"
		@confirm=" closeDeletedShow"></u-modal>
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref
	} from "vue";
	import ConfessionWallItem
	from "@/component/ConfessionWallItem.vue"
	import LostItem
	from "@/component/LostItem.vue"
	import UnusedItem
	from "@/component/UnusedItem.vue"
	import {
		useConfessionStore
	} from "@/stores/confessionStore.js"
	import {
		useUnusedStore
	} from "@/stores/unusedStore.js"
	import {
		useLostStore
	} from "@/stores/lostStore.js"
	const deletedShow = ref(false)

	function closeDeletedShow() {
		deletedShow.value = false
	}

	function deleteOutcome(value) {
		deletedShow.value = value
	}
	const confessionStore = useConfessionStore();
	const unusedStore = useUnusedStore();
	const lostStore = useLostStore()
	const tabs = reactive([{
			name: "表白墙"
		},
		{
			name: "失物招领"
		},
		{
			name: "闲置"
		}
	])
	const tabIndex = ref(0);
	const unusedContent = computed(() => {
		return unusedStore.unusedList
	})
	const lostContent = computed(() => {
		return lostStore.lostList
	})
	const confessionContent = computed(() => {
		return confessionStore.confessionList
	})
	async function changeTab(item) {
		tabIndex.value = item.index;
		if (tabIndex.value == 1) {
			await lostStore.getLostListByUserId(user.userId);
		} else if (tabIndex.value == 2) {
			await unusedStore.getUnusedListByUserId(user.userId);
		} else {
			await confessionStore.getConfessionListByUserId(user.userId);
		}
	}


	let user = reactive({})
	onMounted(async () => {
		user = reactive(JSON.parse(uni.getStorageSync("user")))
		await confessionStore.getConfessionListByUserId(user.userId);

	})
</script>

<style lang="scss">
	page {

		background-image: url('/static/images/mypost-backgrount.jpeg');
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		background-attachment: fixed;

		.main {
			margin-top: 10rpx !important;

			display: flex;
			width: 98%;

			margin: 0 auto;


			flex-direction: column;
		}
	}
</style>